<template>
  <div class="header-right">
    <!-- <div>{{ store.userinfo. }}</div> -->
    <div>{{ store.userinfo.username }}</div>
    <el-dropdown trigger="click" @command="commandMenu">
      <span class="el-dropdown-link">
        <!-- 找个小齿轮 -->
        <el-icon><Setting /></el-icon>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="editUserInfo">个人信息</el-dropdown-item>
          <el-dropdown-item divided command="logout">用户退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import {
    Setting, ArrowDown
} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {ElMessageBox} from 'element-plus'

const router = useRouter()

const props = defineProps(['store'])
console.log(props.store.userinfo)

const methods = {
    editUserInfo(){},
    async logout(){
        try{
            await ElMessageBox.confirm('您真要退出本次登录吗？','退出提示',{
                confirmButtonText:'确认退出',
                cancelButtonText:'考虑一下',
                type:'warning'
            })
            // 点击了确认，进行退出操作,然后进行路由跳转
            props.store?.setUserInfo({})
            router.replace('/login')
        }catch(error){}
    }
}

const commandMenu = (command:string)=>{
    methods[command as keyof typeof methods]()
}

</script>

<style lang="scss" scoped>
.header-right{
    display: flex;
    >div:first-child{
        margin-right: 30px;
    }
}
</style>
